// 切换页面
    $(".header span").click(function () {  
        $(".header .select").removeClass("select");
        $(this).addClass("select");
        if($(".select").html() === "微信小程序") {
            $(".wx").css("display", "block");
            $(".app").css("display", "none");
            $(".web").css("display", "none");
            $(".friend").css("display", "none");
            $('.page').pagination({
                pageCount: Math.ceil(wxData.length / 8),//总的页数
                jump: true,
                coping: true,
                homePage: '首页',
                endPage: '末页',
                prevContent: '上页',
                nextContent: '下页',
                callback: function (api) {
                    // console.log(api.getCurrent())
                    wxPage(8, api.getCurrent());
                }
            });
        } else if($(".select").html() === "APP") {
            $(".wx").css("display", "none");
            $(".app").css("display", "block");
            $(".web").css("display", "none");
            $(".friend").css("display", "none");
            $('.page').pagination({
                pageCount: Math.ceil(appData.length / 8),//总的页数
                jump: true,
                coping: true,
                homePage: '首页',
                endPage: '末页',
                prevContent: '上页',
                nextContent: '下页',
                callback: function (api) {
                    // console.log(api.getCurrent())
                    appPage(8, api.getCurrent());
                }
            });
        } else if($(".select").html() === "网站") {
            $(".wx").css("display", "none");
            $(".app").css("display", "none");
            $(".web").css("display", "block");
            $(".friend").css("display", "none");
        } else if($(".select").html() === "朋友圈广告") {
            $(".wx").css("display", "none");
            $(".app").css("display", "none");
            $(".web").css("display", "none");
            $(".friend").css("display", "block");
        }
    });

    // 微信
    var wxData = [
        {name: "程序秀1", type: "微信扫一扫", times: "20万", pic: "img/case5.png"},
        {name: "程序秀2", type: "微信扫一扫", times: "20万", pic: "img/case5.png"},
        {name: "程序秀3", type: "微信扫一扫", times: "20万", pic: "img/case5.png"},
        {name: "程序秀4", type: "微信扫一扫", times: "20万", pic: "img/case5.png"},
        {name: "程序秀5", type: "微信扫一扫", times: "20万", pic: "img/case5.png"},
        {name: "程序秀6", type: "微信扫一扫", times: "20万", pic: "img/case5.png"},
        {name: "程序秀7", type: "微信扫一扫", times: "20万", pic: "img/case5.png"},
        {name: "程序秀8", type: "微信扫一扫", times: "20万", pic: "img/case5.png"},
        {name: "程序秀9", type: "微信扫一扫", times: "20万", pic: "img/case5.png"},
        {name: "程序秀10", type: "微信扫一扫", times: "20万", pic: "img/case5.png"},
        {name: "程序秀11", type: "微信扫一扫", times: "20万", pic: "img/case5.png"},
        {name: "程序秀12", type: "微信扫一扫", times: "20万", pic: "img/case5.png"},
        {name: "程序秀13", type: "微信扫一扫", times: "20万", pic: "img/case5.png"},
        {name: "程序秀14", type: "微信扫一扫", times: "20万", pic: "img/case5.png"},
        {name: "程序秀15", type: "微信扫一扫", times: "20万", pic: "img/case5.png"},
        {name: "程序秀16", type: "微信扫一扫", times: "20万", pic: "img/case5.png"},
        {name: "程序秀17", type: "微信扫一扫", times: "20万", pic: "img/case5.png"},
        {name: "程序秀18", type: "微信扫一扫", times: "20万", pic: "img/case5.png"}
    ];
    wxPage(8, 1);
    console.log(Math.ceil(wxData.length));
    $('.page').pagination({
        pageCount: Math.ceil(wxData.length / 8),//总的页数
        jump: true,
        coping: true,
        homePage: '首页',
        endPage: '末页',
        prevContent: '上页',
        nextContent: '下页',
        callback: function (api) {
            // console.log(api.getCurrent())
            wxPage(8, api.getCurrent());
        }
    });
    //pageNum: 每页数据的数量; currentPage: 当前页码
    function wxPage(pageNum, currentPage) {
        var currentWx = [];
        // 复制一下数组(splice是对数组本身做的操作);
        var arr = [...wxData];
        currentWx = arr.splice((currentPage-1)*pageNum, pageNum);
        console.log(currentWx);
        drawWx(currentWx);
    }
    function drawWx(currentWx) {
        $(".wx").empty();  
        for(var i = 0; i < currentWx.length; i++) {
            var singleWx = "<div class='singleWx'><img src="+ currentWx[i].pic +"><div class='wxDetail'><p class='name'>"+currentWx[i].name+"</p><p class='type'><span>"+currentWx[i].type+"</span><span>"+currentWx[i].times+"</span></p></div></div>";
            
            
//                  <div class="singleWx">
//      	<img src="img/case5.png"/>
//      	<div class="wxDetail">
//      		<p class="name">程序秀1</p>
//      		<p class="type">
//      			<span>微信扫一扫</span>
//      			<span>20万</span>
//      		</p>
//      	</div>
//      </div>
            $(".wx").append(singleWx);
        }
    }
    // app
    var appData = [
        {name: "程序秀1", type: "APP", times: "20万", pic: "img/case5.png"},
        {name: "程序秀2", type: "APP", times: "20万", pic: "img/case5.png"},
        {name: "程序秀3", type: "APP", times: "20万", pic: "img/case5.png"},
        {name: "程序秀4", type: "APP", times: "20万", pic: "img/case5.png"},
        {name: "程序秀5", type: "APP", times: "20万", pic: "img/case5.png"},
        {name: "程序秀6", type: "APP", times: "20万", pic: "img/case5.png"},
        {name: "程序秀7", type: "APP", times: "20万", pic: "img/case5.png"},
        {name: "程序秀8", type: "APP", times: "20万", pic: "img/case5.png"},
        {name: "程序秀9", type: "APP", times: "20万", pic: "img/case5.png"},
        {name: "程序秀10", type: "APP", times: "20万", pic: "img/case5.png"},
        {name: "程序秀11", type: "APP", times: "20万", pic: "img/case5.png"},
        {name: "程序秀12", type: "APP", times: "20万", pic: "img/case5.png"},
        {name: "程序秀13", type: "APP", times: "20万", pic: "img/case5.png"},
        {name: "程序秀14", type: "APP", times: "20万", pic: "img/case5.png"},
        {name: "程序秀15", type: "APP", times: "20万", pic: "img/case5.png"},
        {name: "程序秀16", type: "APP", times: "20万", pic: "img/case5.png"},
        {name: "程序秀17", type: "APP", times: "20万", pic: "img/case5.png"},
        {name: "程序秀18", type: "APP", times: "20万", pic: "img/case5.png"},
        {name: "程序秀19", type: "APP", times: "20万", pic: "img/case5.png"},
        {name: "程序秀20", type: "APP", times: "20万", pic: "img/case5.png"},
        {name: "程序秀21", type: "APP", times: "20万", pic: "img/case5.png"},
        {name: "程序秀22", type: "APP", times: "20万", pic: "img/case5.png"},
        {name: "程序秀23", type: "APP", times: "20万", pic: "img/case5.png"},
        {name: "程序秀24", type: "APP", times: "20万", pic: "img/case5.png"},
        {name: "程序秀25", type: "APP", times: "20万", pic: "img/case5.png"}
    ];
    appPage(8, 1);
    // console.log(Math.ceil(appData.length));
    //pageNum: 每页数据的数量; currentPage: 当前页码
    function appPage(pageNum, currentPage) {
        var currentApp = [];
        // 复制一下数组(splice是对数组本身做的操作);
        var arr = [...appData];
        currentApp = arr.splice((currentPage-1)*pageNum, pageNum);
        console.log(currentApp);
        drawApp(currentApp);
    }
    function drawApp(currentApp) {
        $(".app").empty();  
        for(var i = 0; i < currentApp.length; i++) {
            var singleApp = "<div class='singleApp'><img src="+ currentApp[i].pic +"><div class='appDetail'><p class='name'>"+currentApp[i].name+"</p><p class='type'><span>"+currentApp[i].type+"</span><span>"+currentApp[i].times+"</span></p></div></div>";
            $(".app").append(singleApp);
        }
    }
    